<template>
  <div class="login-container d-flex flex-column justify-content-center align-items-center vh-100 bg-dark text-light">
    <div class="card p-5 shadow-lg" style="min-width:440px; max-width:520px; padding:56px 48px; background:transparent; border:none;">
      <h2 class="mb-4 text-center" style="color:#000; font-size:2.6rem; font-weight:bold;">慧金视界</h2>
      <form @submit.prevent="handleLogin">
        <div class="mb-4">
          <input v-model="username" class="form-control form-control-lg" placeholder="用户名" required style="font-size:1.2rem;" />
        </div>
        <div class="mb-4">
          <input v-model="password" type="password" class="form-control form-control-lg" placeholder="密码" required style="font-size:1.2rem;" />
        </div>
        <button type="submit" class="btn btn-primary btn-lg w-100 mb-3" style="font-size:1.5rem; height:56px; padding:0;">登录</button>
      </form>
      <div class="text-center">
        <span style="color:#444;">还没有账号？</span>
        <a @click="goToRegister" style="color:#4fc3f7; cursor:pointer; font-weight:bold;">注册</a>
      </div>
    </div>
    <div class="login-footer-tip">本平台所有数据仅用于教学<br>如有侵权请联系QQ：1648694981进行删除</div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios'; // 如果有后端登录API，需要引入

const username = ref('');
const password = ref('');
const router = useRouter();

const handleLogin = async () => {
  if (!username.value || !password.value) {
    alert('请输入用户名和密码');
    return;
  }

  try {
    const res = await axios.post('/api/login', { username: username.value, password: password.value });
    if (res.data.code === 200) {
      localStorage.setItem('isLoggedIn', 'true'); // 登录成功，设置标志
      // Store user ID from the response
      if (res.data.data && res.data.data.user_id) {
           localStorage.setItem('user_id', res.data.data.user_id);
      }
      router.push('/welcome');
    } else {
      alert(res.data.message || '登录失败');
    }
  } catch (e) {
    alert('登录请求失败');
  }

  // 当前简化版：只要输入了用户名和密码就认为是登录成功
  /*
  if (username.value && password.value) {
     localStorage.setItem('isLoggedIn', 'true'); // 登录成功，设置标志
     router.push('/welcome');
  } else {
     alert('请输入用户名和密码');
  }
  */
};

const goToRegister = () => {
  router.push('/register');
};
</script>
<style scoped>
.login-container {
  background: transparent; /* Changed to transparent */
}
.card {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25); /* Reverted shadow */
  background: transparent !important;
  border:none; /* Reverted to no border */
}
.form-control:focus {
  box-shadow: 0 0 0 2px #4fc3f7; /* Reverted focus color */
  border-color: #4fc3f7; /* Reverted border color */
}
.card input.form-control {
  background: transparent !important;
  border: 2px solid #aaa !important; /* Changed border color */
  color: #111 !important; /* Changed to dark text */
  font-size: 1.2rem;
}

.card input.form-control::placeholder {
  color: #222; /* Changed placeholder color to match register */
  opacity: 1;
}

.login-footer-tip {
  width: 100vw;
  position: fixed;
  left: 0;
  bottom: 18px;
  text-align: center;
  color: #fff; /* Changed to white text */
  font-size: 1rem;
  letter-spacing: 1px;
  z-index: 10;
  pointer-events: none;
}
</style> 